/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useState, useRef } from 'react';
import { DrawerForm, ProFormText } from '@ant-design/pro-form';
import { Spin, Button, message } from 'antd';
import type { ConnectState } from '@/models/connect';
import type { ProFormInstance } from '@ant-design/pro-form';
import { getWhiteListInfo, addWhiteList } from '@/services/yz/whitelist';
import { useSelector } from 'umi';

type PropsType = {
  actionRef: any;
  visible: boolean;
  onClose: () => void;
};

const Index: React.FC<PropsType> = (props) => {
  const [loading, setLoading] = useState<boolean>(false);
  const [whitelist, setWhitelist] = useState<{ label: string; value: string }[]>([]);
  const [userInfo, setUserInfo] = useState<{
    cm_id: string;
    inn_phone: string;
    inn_name: string;
    contact_phone: string;
  }>();
  const { visible, onClose, actionRef } = props;

  const formRef = useRef<ProFormInstance>();
  const { winSize } = useSelector((state: ConnectState) => state.global);

  const removeData = () => {
    setWhitelist([]);
    setUserInfo({});
  };
  const handleSearch = async () => {
    setLoading(true);
    const keyword = formRef.current?.getFieldValue('keyword') || '';
    const { code, data, msg } = await getWhiteListInfo({ keyword });
    if (code == 0) {
      const customersInfo = {
        phone: '驿站账号',
        inn_name: '驿站名称',
        concat_phone: '联系电话',
      };
      const customersData = Object.keys(customersInfo).map((item) => ({
        label: customersInfo[item],
        value: data[item],
      }));
      setUserInfo(data);
      setWhitelist(customersData);
    } else {
      removeData();
      message.error(msg);
    }
    setLoading(false);
  };
  const handleAddWhiteList = async () => {
    const { code, msg } = await addWhiteList(userInfo);
    if (code == 0) {
      onClose();
      message.success(msg);
      actionRef.current?.reload();
    } else {
      message.error(msg);
    }
    removeData();
  };
  const handleClose = () => {
    onClose();
    formRef.current?.setFieldValue('keyword', '');
    removeData();
  };
  return (
    <DrawerForm
      title='添加白名单'
      formRef={formRef}
      width={winSize === 'xs' ? '80%' : 500}
      visible={visible}
      labelAlign='left'
      layout='horizontal'
      labelCol={{
        span: 5,
      }}
      drawerProps={{
        onClose: handleClose,
        footerStyle: { display: 'none' },
      }}
    >
      <Spin spinning={loading}>
        <ProFormText
          name='keyword'
          placeholder='请输入驿站账号'
          getValueFromEvent={(e) => {
            return e.target.value.replace(/\s+/gi, '');
          }}
          addonAfter={
            <Button type='primary' onClick={handleSearch}>
              查询
            </Button>
          }
        ></ProFormText>
        {whitelist.length > 0 ? (
          <div>
            {whitelist.map((item) => {
              return (
                <ProFormText
                  readonly
                  key={item.label}
                  label={item.label}
                  fieldProps={{
                    value: item.value,
                  }}
                />
              );
            })}
            <Button type='primary' onClick={handleAddWhiteList}>
              确认添加
            </Button>
          </div>
        ) : null}
      </Spin>
    </DrawerForm>
  );
};

export default Index;
